<template>
	<view class="content">
		<!-- 轮播图 -->
		<view class="banner-img">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item v-for="(item, i ) in state.goods.img_s">
					<view class="swiper-item">
						<image :src="item.url"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="banner-text">
			<text class="tit">{{ state.goods.title }}</text>
			<text class="addr">{{ state.goods.desc }}</text>
			<text class="phone">{{ state.goods.nprice }}</text>
			<view class="icon">
				<image src="/static/icon/index/dingwei.png"></image>
				<image src="/static/icon/index/dianhua.png"></image>
			</view>
		</view>
		<view class="banner-content">
			<rich-text :nodes="formatRichText(state.goods.content)"></rich-text>
		</view>

	</view>
	<view class="bottom-cart" @click="open_popup()">
		<u-button text="立即购买" size="large"
			color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
	</view>

	<u-popup :show="state.isShow" :round="10" mode="bottom" :closeOnClickOverlay="true" @close="close_popup">
		<view class="popup-box">
			<u-image radius="10" :src="state.goods.img_s[0].url" width="100px" height="150px"></u-image>
			<view class="t-info">
				<text style="font-size: small;">{{ state.goods.title }}</text>
				<view>
					<text style="font-size: small;">商品价格：</text>
					<text style="color: #797979; font-size: small; text-decoration: line-through;">
						{{ state.goods.oprice }}
					</text>
					<text style="color: red; font-size: large text-decoration:none;">
						{{ state.goods.nprice }}
					</text>
				</view>
				<view>
					<u-number-box v-model="state.num" :min="1" @change="valChange">
						<template #minus>
							<view class="minus">
								<u-icon name="minus" size="12"></u-icon>
							</view>
						</template>
						<template #input>
							<text style="width: 50px;text-align: center;" class="input">{{ state.num }}</text>
						</template>
						<template #plus>
							<view class="plus">
								<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
							</view>
						</template>
					</u-number-box>
				</view>
				<view>
					<text style="font-size: small; ">支付金额：</text>
					<text style="font-size: small; color: red;">{{ state.amount }}</text>
				</view>
				<view>
					<text v-if="state.amount <= state.balance" style="font-size: small;">
						账户余额：{{ state.balance }}
					</text>
					<text v-if="state.amount > state.balance" style="font-size: small;">
						账户余额：<text style="text-decoration: line-through;">{{ state.balance }} 余额不足</text>
					</text>
					<text v-if="state.amount > state.balance" style="color:deepskyblue;font-size: small;">去充值</text>
				</view>
				<view>
					<text style="font-size: small;">收货地址：{{ state.address }}</text>
					<u-button type="primary" size="mini" text="更改收货地址"></u-button>
				</view>
			</view>
		</view>
		<u-button style="margin-top: 10rpx;" class="btn" text="立即支付" @click="pay()"
			color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))">
		</u-button>
	</u-popup>
</template>

<script setup>
import { reactive } from "vue";
import { onLoad } from '@dcloudio/uni-app';
import { getGoodsById, createOrder } from '../../../network/shop'
import { getDefaultAddr, getBalance } from '../../../network/mine'
/**
 * 处理富文本里的图片宽度自适应
 * 1.去掉img标签里的style、width、height属性
 * 2.img标签添加style属性：max-width:100%;height:auto
 * 3.修改所有style里的width属性为max-width:100%
 * 4.去掉<br/>标签
 * @param html
 * @returns {void|string|*}
 */

const formatRichText = (html) => {
	if (html) {
		let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
			match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
			match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
			match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
			return match;
		});
		newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
			match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
			return match;
		});
		newContent = newContent.replace(/<br[^>]*\/>/gi, '');
		newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin:10px 0;"');
		return newContent;
	}

}

const state = reactive({
	goods: [],
	isShow: false,
	num: 1,
	balance: 0,
	amount: '',
	address: "贵州省贵阳市观山湖区通宝路2号",
	uid: 0,
	gid: 0,
	aid: 0
})

// 获取页面的传值
onLoad((option) => {
	getGoodsById({ gid: option.gid }).then((res) => {
		// console.log(res);
		state.goods = res.data;
		state.gid = res.data.gid
		state.amount = res.data.nprice
	})
})

// 打开弹框
const open_popup = () => {
	// 获取token 为空则跳转到登录界面
	uni.getStorage({
		key: 'token',
		success: (res) => {
			state.uid = res.data.uid;
			state.isShow = true;
			// 查询余额
			getBalance({ uid: res.data.uid }).then((e) => {
				state.balance = e.data
			})
			// 查询默认收货地址
			getDefaultAddr({ uid: res.data.uid }).then((e) => {
				state.address = e.data.address
			})
		}, fail: (res) => {
			uni.navigateTo({
				url: '/pages/tabbar/mine/login',
			});
		},
	})
}

// 关闭弹出层
const close_popup = () => {
	state.isShow = false;
}
const valChange = () => {
	// console.log();
	state.amount = state.goods.nprice * state.num;

}


// 支付操作
const pay = () => {
	uni.showLoading({
		title: '正在支付...'
	});
	setTimeout(function () {
		uni.hideLoading();

		// 生成订单
		createOrder({
			uid: state.uid,
			gid: state.gid,
			aid: state.aid,
			amount: state.goods.nprice,
			balance: state.balance
		}).then((res) => {
			console.log(res.data);
			if (res.code == 0) {
				uni.showToast({
					title: '支付成功',
					type: 'success'
				});
				uni.navigateTo({
					url: '/pages/tabbar/shop/order'
				});
			} else {
				uni.showToast({
					title: '支付失败',
					type: 'none'
				});
				state.isShow = false;
			}
		})
	}, 3000);

}
</script>

<style scoped lang="scss">
.popup-box {
	width: 100%;
	display: grid;
	grid-auto-flow: column;
	place-content: space-around;
	padding: 10rpx;

	// grid-auto-columns: repeat(2,1fr);
	.t-info {
		display: flex;
		flex-direction: column;
		place-content: space-around;
	}
}


.bottom-cart {
	width: 100%;
	// height: 120rpx;
	position: fixed;
	z-index: 100;
	left: 0;
	bottom: 0;
	// border-radius: 10%;
	text-align: center;
	line-height: 120rpx;
	margin-bottom: 50rpx;
}


.content {
	padding: 10rpx;
	background-color: #fdf4ed;
	height: calc(100vh);

	.banner-content {
		width: 100%;
		background-color: #fff;
		margin-top: 5rpx;
		font-size: smaller;
		// bottom: 140rpx;
		// position: relative;
		padding-bottom: 120rpx;
	}

	.banner-text {

		width: 100%;
		background-color: #fff;
		border-bottom: $boxBorder;
		display: grid;
		padding-bottom: 10rpx;
		grid-template-columns: 85% 15%;
		grid-template-rows: repeat(3, 1fr);
		place-items: center start;

		text {
			font-size: smaller;
			padding-left: 10rpx;
		}

		.tit {
			padding-top: 5rpx;
			font-size: larger;
			grid-column: 1/sapn 2;
		}

		.addr {
			grid-column: 1/sapn 2;
		}

		.icon {
			width: 100%;
			display: flex;
			place-content: space-evenly;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}

	.banner-img {

		.swiper {
			width: 100%;
			height: 300rpx;

			.swiper-item {
				display: block;
				height: 300rpx;
				line-height: 300rpx;
				text-align: center;
				border-radius: 10rpx;

				image {
					width: 100%;
					height: 300rpx;
				}
			}
		}
	}
}

.minus {
	width: 22px;
	height: 22px;
	border-width: 1px;
	border-color: #E6E6E6;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	border-bottom-left-radius: 100px;
	border-bottom-right-radius: 100px;
	@include flex;
	justify-content: center;
	align-items: center;
}

.input {
	padding: 0 5px;
}

.plus {
	width: 22px;
	height: 22px;
	background-color: #FF0000;
	border-radius: 50%;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	justify-content: center;
	align-items: center;
}
</style>
